<script setup lang='ts'>
import bokInfo from '@/store/bokInfo';
import articleApi  from "@/apis/articleApi"
import { onMounted, ref, watch } from 'vue';
import userStore from '@/store/userStore';
import { ElMessage } from 'element-plus';
import queryIDStore from '@/store/queryIDStore';
import {useRouter,useRoute} from 'vue-router'
import  flashStore from "@/store/flashStore"

const info =ref()

const router=useRouter()
const route=useRoute()

const currentPage=ref()

const totalPage=ref()


onMounted(async()=>{

   
   if(sessionStorage.getItem('flash')=="flash_current_page"){
            sessionStorage.removeItem('flash')
            router.go(0)
      }


   currentPage.value =bokInfo().pageNum
   // console.log(currentPage.value);
   info.value= await bokInfo().ClickStoreBokInfo(currentPage.value)
  currentPage.value =bokInfo().pageNum
  totalPage.value =bokInfo().totalPages;
})
//   //刷新
//   router.push({path:'/blogger/content/index'})

   //点击分页之后，发送请求
   const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)

  bokInfo().ClickStoreBokInfo(val).then(res=>{
   info.value=res
  });
  
}


//当前用户的用户id
const   userId =userStore().info?.id;




//写点赞+1 或-1
  

//找到这个博客，页面响应式加减
   const getCurrentBokByGoods=(queryBid:any)=>{
      
   return  info.value.records.find((v:any)=>{
            return v.b_id==queryBid
     })
     
    
       }

//点赞发送请求  点赞+1或-1
const clickGoods=async (b_id:number,u_id:number) => {
  const  {msg}= await articleApi.changeGoods(b_id,u_id);
  console.log(msg);
  if(msg=="点赞成功"){
   ElMessage({
      type:"success",
      message:'点赞成功'
   })

   //这里不刷新页面了，前端直接+1 -1就行
   getCurrentBokByGoods(b_id).goods+=1

  }
  else{
   ElMessage({
      type:"warning",
      message:'取消成功'
   })
   getCurrentBokByGoods(b_id).goods-=1
   //不能让它小于0
   if(getCurrentBokByGoods(b_id).goods<0){
      getCurrentBokByGoods(b_id).goods=0
   }
  }
}

//点击那个就存储那个b_id
const  storeQuery=(b_id:any)=>{
   queryIDStore().setQueryBid(b_id);
  

   // sessionStorage.setItem("flash_url_one","flash_url_one")
}
</script>
<template>
 <div class="border bg-white w-11/12 md:w-1/2 mb-10  md:mr-3 shadow-md rounded-md ">
             <h1 class=" text-gray-600  border-b p-5">社区动态</h1>
       
       <div class="flex  flex-col items-start">
        <section class="w-full border-b p-5 flex justify-start items-center hover:bg-gray-50 "
         v-for="(v,index) in info?.records" :key="index">
         
             <div class="flex  items-center">
                <!-- TODO根据当前的人物点击当前的用户信息 -->
                <div  class="flex mr-3 rouned-sm ">
                  <img  :src="v.user?.avatar"  class="flex rounded-md object-cover
                     shadow-md overflow-hidden box-border  w-[60px] h-[60px]">
                </div>
             </div>
            <div class="flex flex-col">
                <div class="flex flex-col justify-between">
                    <!-- TODO 点击之后找到对应的id,在pinia中查找到对应的用户的帖子 -->
         
                    <router-link @click="storeQuery(v.b_id)"  :to="`/blogger/content/show?id=${v.b_id}`">
                    
                    <h1 
                class=" cursor-pointer hover:text-purple-400 duration-700 text-base font-medium">{{v.title}}</h1>
                  </router-link>
               
           
             </div>
             <div class="text-light text-gray-400 text-sm
              font-normal flex items-center">
                <h1>{{v.bok_create_time}}</h1>
             </div>
             <!-- 评论数 -->
             <div class="flex justify-start gap-3 ">
             <div class="flex justify-center items-center">
               <icon-message-emoji theme="outline" size="14" fill="#2f7fb9" />
               <p class="text-xs">{{v.comments}}</p>
            </div>
            <!-- 文章的点赞，-->
            <div class="flex justify-center items-center ">

               <icon-good-two theme="outline" size="14"
                fill="#2f7fb9"   @click="clickGoods(v.b_id,userId)" class="cursor-pointer"/>
                   <p class="text-xs">{{v.goods}}</p>
            </div>
   
               <!-- 文章的阅读数，-->
               <div class="flex justify-center items-center">
               
              <icon-eyes theme="outline" size="14" fill="#bb7be5"/>
               <p class="text-xs">{{v.views}}</p>
            </div>
             </div>



            </div>
        </section> 
        <section class="w-full flex justify-center  pt-10 pb-10">
            <el-pagination    background layout=" pager" 
            :hide-on-single-page="true"
            @current-change="handleCurrentChange"
             
            :total="totalPage*10"
            v-model:current-page="currentPage"
            />

        </section>
       </div>
  </div>
 
</template>
<style scoped lang='scss'>


</style>